<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>左右分栏页面</title>
    <link rel="stylesheet" href="../static/src/xiaoliyu/css/forindex.css">

</head>
<body>
<div class="container">
    <div class="left">
        <h2>导航栏</h2>
        <ul>
            <li><a id="home" href="#">首页</a></li>
            <li><a id="gouwuche" href="#">购物车</a></li>
            <li><a id="orderlist">我的订单</a></li>
            <li><a id="baba"href="#">联系我们</a></li>
        </ul>
    </div>

    <div class="right">
        <div class="right_top"></div>

        <div class="right_bot" id="right_bot_1" style="display: flex">
            <div style="width: 20px;height: 20px;background-color: #003a9f;"></div>
            <ul id="bot_1_li">
            </ul>
        </div>

        <div class="right_bot" id="right_bot_2">
            <div style="width: 20px;height: 20px;background-color: #009F40;"></div>
        </div>

        <div class="right_bot" id="right_bot_3">
            <div style="width: 20px;height: 20px;background-color: #949F00;"></div>
        </div>

        <div class="right_bot" id="right_bot_4">
            <div style="width: 20px;height: 20px;background-color: #9f0000;"></div>
        </div>
    </div>
</div>

<script>
        var homeLink = document.getElementById('home');
        var gouwucheLink = document.getElementById('gouwuche');
        var orderlistLink = document.getElementById('orderlist');
        var babaLink = document.getElementById('baba');


        //首页页面点击逻辑
        homeLink.addEventListener('click', function() {
        // 在这里编写点击首页链接后的逻辑
        var right_bot_1 = document.getElementById("right_bot_1");
        var right_bot_2 = document.getElementById("right_bot_2");
        var right_bot_3 = document.getElementById("right_bot_3");
        var right_bot_4 = document.getElementById("right_bot_4");
        right_bot_1.style.display = 'flex';
        right_bot_2.style.display = 'none';
        right_bot_3.style.display = 'none';
        right_bot_4.style.display = 'none';

        var ual = document.getElementById("bot_1_li");
            const liList = ual.children;
            // 遍历子节点，将其移除
            for (let i = liList.length - 1; i >= 0; i--) {
                const li = liList[i];
                li.remove();
            }
        for (var i=0;i<6;i++){

            var lia = document.createElement("li");
            lia.style.marginBottom="5px";
            var divz = document.createElement("div");
            divz.style.width="800px";
            divz.style.height="200px";
            divz.style.borderBottom="#009F40 1px solid"
            var imga = document.createElement("img");
            imga.style.backgroundImage="/src/xiaoliyu/img/IMG_5363.jpg"
            divz.append(imga);
            lia.append(divz);
            ual.append(lia);
        }
        right_bot_1.append(ual)
        console.log('点击了首页链接');
    });

        //首页页面点击逻辑
        gouwucheLink.addEventListener('click', function() {
        // 在这里编写点击首页链接后的逻辑
        var right_bot_1 = document.getElementById("right_bot_1");
        var right_bot_2 = document.getElementById("right_bot_2");
        var right_bot_3 = document.getElementById("right_bot_3");
        var right_bot_4 = document.getElementById("right_bot_4");
        right_bot_2.style.display = 'block';
        right_bot_1.style.display = 'none';
        right_bot_3.style.display = 'none';
        right_bot_4.style.display = 'none';


        console.log('点击了购物车连接');
    });

        //首页页面点击逻辑
        orderlistLink.addEventListener('click', function() {
        // 在这里编写点击首页链接后的逻辑
        var right_bot_1 = document.getElementById("right_bot_1");
        var right_bot_2 = document.getElementById("right_bot_2");
        var right_bot_3 = document.getElementById("right_bot_3");
        var right_bot_4 = document.getElementById("right_bot_4");
        right_bot_3.style.display = 'block';
        right_bot_1.style.display = 'none';
        right_bot_2.style.display = 'none';
        right_bot_4.style.display = 'none';



        console.log('点击了订单链接');
    });


        //首页页面点击逻辑
        babaLink.addEventListener('click', function() {
        // 在这里编写点击首页链接后的逻辑
        var right_bot_1 = document.getElementById("right_bot_1");
        var right_bot_2 = document.getElementById("right_bot_2");
        var right_bot_3 = document.getElementById("right_bot_3");
        var right_bot_4 = document.getElementById("right_bot_4");
        right_bot_4.style.display = 'block';
        right_bot_1.style.display = 'none';
        right_bot_2.style.display = 'none';
        right_bot_3.style.display = 'none';







        console.log('点击了联系我们的链接');
    });

</script>
</body>
</html>